<template>
  <div class="zhuce">
    <van-nav-bar title="登录页" />
    <van-form @submit="onSubmit">
      <van-field class="inputs" v-model="fromData.username" placeholder="用户名" />
      <van-field class="inputs" v-model="fromData.password" type="password" placeholder="密码" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { user_login } from "../axios/api";
import { Toast } from 'vant';


export default {
  data() {
    return {
      fromData: { username: '', password: '' }
    };
  },
  methods: {
    onSubmit() {
      if (/^(?:(?:\+|00)86)?1\d{10}$/.test(this.fromData.username) == false) {
        Toast.fail('手机号格式错误'); this.fromData.username = ''
      } else if (this.fromData.password == '') {
        Toast.fail('密码不能为空');
      } else {
        user_login({ phone: this.fromData.username, pass: this.fromData.password }).then(
          response => {
            // console.log(response.data);
            if (response.data.code == 200) {
              Toast.success('登陆成功，欢迎回来！');
              localStorage.setItem('token', response.data.token);
              localStorage.setItem('userinfo', JSON.stringify(response.data.userinfo));
              this.$router.push('/myindex')
            }
          }
        )
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.inputs {
  margin: 60px auto;
  border-bottom: 1px solid rgba(128, 128, 128, 0.225);
  // border-radius: 35px;
  width: 90%;
  height: 90%;
}
</style>